import { DeleteOutlined, EditOutlined, PlusOutlined, SearchOutlined } from '@ant-design/icons'
import { Button, Col, Form, Input, Row, Space, Table, Drawer, Select, Popconfirm } from 'antd'
import React, { useEffect, useState } from 'react'
import { medListAPI } from '../service/medicine'
import ImageUpLoad from '../components/ImageUpload'
import MyEditor from '../components/MyEditor'

const { TextArea } = Input;


function Medicine() {
  //定义状态 获取药品列表
  const [medicineList, setMedicineList] = useState([])
  //定义状态 保存药品分类列表
  const [medList, setMedList] = useState([])
  //定义状态 保存抽屉开关
  const [open, setOpen] = useState(false)
  //定义状态保存抽屉标题
  const [drawerTitle, setDrawerTitle] = useState('')
  //定义药品的总数量
  const [total,setTotal] = useState(0)
  //定义状态保存图片上传成功后的路径 子组件要传递过来
  const [imageUrl, setImageUrl] = useState();
  //定义状态 保存富文本编辑器内容  子组件要传递过来
  const [html, setHtml] = useState('')

  //模拟生命周期
  useEffect(() => {
    medListAPI().then((res) => {
      console.log(res);
      setMedicineList(res.data)//渲染药品列表
      setMedList(res.data)//抽屉中的下拉框
      setTotal(res.total)
    })
  }, [])

  return <>
    <Space style={{ width: '100%'}} 
    direction='vertical' size='large'
    >
      <Row>
        <Col span={24}>
          <Form layout='inline' onFinish={(v)=>{console.log(v);}}>
            <Form.Item>
              <Input placeholder='请输入药品名称' style={{ width: 180 }} />
            </Form.Item>
            <Form.Item>
              <Button type='primary' icon={<SearchOutlined />}
                htmlType='submit'
              >
                查询</Button>
            </Form.Item>
          </Form>
        </Col>
      </Row>
      <Row>
        <Col>
          <Button
            type='primary'
            icon={<PlusOutlined />}
            onClick={() => {
              //打开抽屉
              setOpen(true)
              setDrawerTitle('新增药品')
            }}
          >新增药品</Button>
        </Col>
      </Row>
      <Row>
        <Col span={24}>
          <Table
            pagination={{//分页器
              total,
              onChange:(pno)=>{
                medListAPI({pno}).then((res) => {
                  console.log(res);
                  setMedicineList(res.data)//渲染药品列表
                })
              }
            }}
            rowKey='id'//使用ID作为唯一标识
            dataSource={medicineList}
            columns={[
              {
                title: 'ID',
                dataIndex: 'id',
                key: 'id',
                align: 'center'
              },
              {
                title: '药品名称',
                dataIndex: 'title',
                key: 'title',
                align: 'center'
              },
              {
                title: '附图',
                dataIndex: 'pic',
                key: 'pic',
                align: 'center',
                render: (v) => {
                  // console.log(v,r);
                  return <img src={v} alt='' style={{ width: 100 }}></img>
                }
              },
              {
                title: '市场价',
                dataIndex: 'market_price',
                key: 'market_price',
                align: 'center'
              },
              {
                title: '售价',
                dataIndex: 'sale_price',
                key: 'sale_price',
                align: 'center'
              },
              {
                title: '药品分类',
                dataIndex: 'type',
                key: 'type',
                align: 'center'
              },
              {
                title: '药品单位',
                dataIndex: 'unit',
                key: 'unit',
                align: 'center'
              },
              {
                title: '操作',
                dataIndex: 'op',
                key: 'op',
                align: 'center',
                render: (v, r) => {
                  return (
                    <Space>
                      <Button type='primary' icon={<EditOutlined />} size='small' />

                      <Popconfirm
                        title="删除提示"
                        description="你确认要删除当前数据吗?"
                        okText="确认"
                        cancelText="取消"
                        onConfirm={()=>{}}
                      >
                        <Button
                          type='primary'
                          icon={<DeleteOutlined />}
                          size="small" danger
                        ></Button>
                      </Popconfirm>
                    </Space>
                  )
                }
              },
            ]}
          />
        </Col>
      </Row>
    </Space>
    {/* 抽屉组件 */}
    <Drawer
      width={600}
      title={drawerTitle}
      placement="right"
      onClose={() => {
        setOpen(false)
      }}
      open={open}
      maskClosable={false}
      destroyOnClose
    >
      <Form labelCol={{ span: 3 }}>
        <Form.Item label="药品名称" name="title">
          <Input placeholder='请输入药品名称' style={{ width: 220 }} />
        </Form.Item>
        <Form.Item label="市场价" name="market_price">
          <Input placeholder='请输入市场价格' style={{ width: 220 }} />
        </Form.Item>
        <Form.Item label="售价" name="sale_price">
          <Input placeholder='请输入售价' style={{ width: 220 }} />
        </Form.Item>
        <Form.Item label="药品分类" name="type">
          <Select
            placeholder='药品分类'
            style={{ width: 120 }}
            //API自定义value和label的名称
            fieldNames={{ label: 'type', value: 'id' }}
            options={medList}
          />
        </Form.Item>
        <Form.Item label="药品单位" name="unit">
          <Select
            placeholder='药品单位'
            style={{ width: 120 }}
            //API自定义value和label的名称
            fieldNames={{ label: 'type', value: 'id' }}
            options={medList}
          />
        </Form.Item>
        <Form.Item label="药品图片">
          <ImageUpLoad imageUrl={imageUrl} setImageUrl={setImageUrl} />
        </Form.Item>
        <Form.Item label="功能主治" name="fun">
          <TextArea placeholder="请输入功能主治" style={{ height: '100px' }} />
        </Form.Item>
        <Form.Item label="不良反应" name="ban">
          <TextArea placeholder="请输入不良反应" style={{ height: '100px' }} />
        </Form.Item>
        <Form.Item label="使用注意事项" name="need">
          <TextArea placeholder="请输入注意事项" style={{ height: '100px' }} />
        </Form.Item>
        <Form.Item label="进药厂商" name="company">
          <Select
            placeholder='进药厂商'
            style={{ width: 120 }}
            //API自定义value和label的名称
            fieldNames={{ label: 'type', value: 'id' }}
            options={medList}
          />
        </Form.Item>
        <Form.Item label="批准文号" name="num">
          <Input placeholder='请输入批准文号' style={{ width: 220 }} />
        </Form.Item>
        <Form.Item label="详情描述" name="detail">
          <MyEditor html={html} setHtml={setHtml}/>
        </Form.Item>
      </Form>
    </Drawer>
  </>
}

export default Medicine
